extends ./layouts/default

block  title
  title Koa Douban 首页

block content
  style.        
    header {            
      position: -webkit-sticky;            
      position: sticky;            
      top: 0;            
      background: #00474f;            
      color: #E7DACB;            
      display: flex;            
      justify-content: space-between;            
      align-items: center;            
      height: 50px;            
      z-index: 500;
    }        
    @media (min-width: 768px) {            
      .sidebar {                
        position: -webkit-sticky;                
        position: sticky;                
        top: 4rem;                
        z-index: 1000;                
        height: calc(100vh - 4rem);                
        border-right: 1px solid rgba(0, 0, 0, .1);                
        order: 0;                
        border-bottom: 1px solid rgba(0, 0, 0, .1);            
      }            
      .cat-links {                
        display: block !important;                
        max-height: calc(100vh - 9rem);                
        overflow-y: auto;                
        padding-top: 1rem;                
        padding-bottom: 1rem;                
        margin-right: -15px;                
        margin-left: -15px;            
      }        
    }        
    .sidebar-link {            
      display: block;            
      padding: .25rem 1.5rem;            
      font-weight: 500;            
      color: rgba(0, 0, 0, .65);        
    }        
    .sidebar .nav > li > a {            
      display: block;            
      padding: .25rem 1.5rem;            
      font-size: 90%;            
      color: rgba(0, 0, 0, .65);        
    }        
    .sidebar-item.active > .sidebar-inner {            
      display: block;        
    }        
    .card {            
      margin-bottom: 1.5rem;        
    }        
    .switcher {            
      position: relative;            
      padding: 1rem 15px;            
      margin-right: -15px;            
      margin-left: -15px;           
      border-bottom: 1px solid rgba(0, 0, 0, .05);        
    }        
    .sidebar-toggle {            
      line-height: 1;            
      color: #212529;        
    }        
    .p-0 {            
      padding: 0 !important;        
    }        
    .ml-3, .mx-3 {           
      margin-left: 1rem !important;        
    }        
    .btn-link {            
      font-weight: 400;            
      color: #007bff;            
      background-color: transparent;        
    }
  include ./includes/header
  .container-fluid
    .row
      .col-12.col-md-3.col-xl-2.sidebar
        .collapse.cat-links                    
          .sidebar-item.active                        
            a.sidebar-link(href='/') Links                        
            ul.nav.sidebar-inner                            
              li.active.sidebar-inner-active                                
                a(href='/') Link1                            
              li.sidebar-inner-active                                
                a(href='/') Link2   
      .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content    
        .row
          .col-md-6
            .card
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video="http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video="http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
        .row
          .col-md-6
            .card
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video="http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src="http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a", data-video="http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
              
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1",role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")        
    .modal-dialog.modal-lg            
      #videoModal.modal-content
  
  script.
    var player = null;

    $(document).ready(function () {

      $('#myModal').on('hidden.bs.modal', function (e) {                
          if (player && player.pause) player.pause();            
      })            
      $('.card-img-top').click(function (e) {                
        var video = $(this).data("video");                
        var image = $(this).attr("src");                
        $('#myModal').modal('show');                
        if (!player) {                    
          player = new DPlayer({                        
            container: document.getElementById("videoModal"),                        
            screenshot: true,                        
            video: {                            
              url: video,                            
              pic: image,                            
              thumbnails: image,                        
            }                    
          })                
        } else {                    
          if (play.video.currentSrc !== video) {                        
            player.switchVideo({                            
              url: video,                            
              pic: image,                            
              type: "auto"                        
            });                    
          }                
        }            
      })       
    })